/** CONTENTS
 *  ========
 *  1.  IMPORTS
 *  2.  COMPONENTS
 *          NavButton
 *          NavMenu
 *  3.  STYLES
 * 
 *
 * 
 */
"use strict";

// import React, {
//     Alert,
//     AppRegistry,
//     Component,
//     Dimensions,
//     Image,
//     Navigator,
//     StyleSheet,
//     Text,
//     TextInput,
//     TouchableOpacity,
//     View
// } from 'react-native';

// import React, {
//   Component,
// } from 'react';
// import {
//   DrawerLayoutAndroid,
//   ProgressBarAndroid,
//   Text,
// } from 'react-native';

////////////////////////////////////////////////////////////////////////////////
// IMPORTS

// var React = require('react');
// var ReactNative = require('react-native');
// var {
//   AppRegistry,
//   Component,
//   DrawerLayoutAndroid,
//   ProgressBarAndroid,
//   Navigator,
//   ScrollView,
//   StyleSheet,
//   Text,
//   TouchableHighlight,
// } = ReactNative;
// var BreadcrumbNavSample = require('./BreadcrumbNavSample');
// var NavigationBarSample = require('./NavigationBarSample');
// var JumpingNavSample = require('./JumpingNavSample');

import React, {
    Component,
} from 'react';
import {
    Animated,
    AppRegistry,
    Image,
    Navigator,
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    TouchableHighlight,
    PanResponder
} from 'react-native';

import {
    NavButton
} from './components/NavButton';


import TopBar from './components/TopBar.js';
// var TopBar = require('./components/TopBar'); // An alternative way to import the component

import NavigationBar from './components/NavigationBar.js';
// var NavigationBar = require('./components/NavigationBar'); // An alternative way to import the component

////////////////////////////////////////////////////////////////////////////////
// STYLES
// const styles = StyleSheet.create({
//     container: {
//         flex: 1,
//         justifyContent: 'center',
//         alignItems: 'center',
//         backgroundColor: 'orange'
//     },
//     welcome: {
//         fontSize: 20,
//         textAlign: 'center',
//         margin: 10,
//         color: '#fff',
//     },
//     instructions: {
//         textAlign: 'center',
//         color: '#fff',
//         marginBottom: 5,
//     },
//     text_center: {
//         textAlign: 'center',
//         color: '#fff'
//     },
//     button: {
//         borderRadius: 8,
//         height: 30,
//         flexDirection: 'row',
//         backgroundColor: 'orange',
//         padding: 10,
//         alignItems: 'center',
//         justifyContent: 'center',
//     }
// });
var SQUARE_DIMENSIONS = 100;
var styles = StyleSheet.create({
    titleText: {
        fontSize: 24,
    },
    messageText: {
        fontSize: 17,
        fontWeight: '500',
        padding: 15,
        marginTop: 50,
        marginLeft: 15,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F0F4F5'
    },
    topBar: {
        top: 0
    },
    button: {
        backgroundColor: 'white',
        padding: 15,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#CDCDCD',
    },
    buttonText: {
        fontSize: 17,
        fontWeight: '500',
    },
    scene: {
        flex: 1,
        paddingTop: 20,
        backgroundColor: '#EAEAEA',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    square: {
        width: SQUARE_DIMENSIONS,
        height: SQUARE_DIMENSIONS,
        backgroundColor: 'blue'
    }
});


////////////////////////////////////////////////////////////////////////////////
// COMPONENTS


////////////////////////////////////////////////////////////////////////////////
// ALL THE SAMPLE SCENES

class SampleScene0 extends Component {

    constructor(props) {
        super(props);
        this.incrScaleFactor = 0;
        this.state = {
            pan: new Animated.ValueXY(),
            scale: new Animated.Value(1)
        };
    }

    componentWillMount() {
        this._panResponder = PanResponder.create({
            onMoveShouldSetResponderCapture: () => true,
            onMoveShouldSetPanResponderCapture: () => true,

            onPanResponderGrant: (e, gestureState) => {
                // Set the initial value to the current state
                this.state.pan.setOffset({ x: this.state.pan.x._value, y: this.state.pan.y._value });
                this.state.pan.setValue({ x: 0, y: 0 });
                Animated.spring(
                    this.state.scale,
                    { toValue: 1.5, friction: 3 }
                ).start();
            },

            // When we drag/pan the object, set the delate to the states pan position
            onPanResponderMove: Animated.event([
                null, { dx: this.state.pan.x, dy: this.state.pan.y },
            ]),

            onPanResponderRelease: (e, {vx, vy}) => {
                // Flatten the offset to avoid erratic behavior
                this.state.pan.flattenOffset();
                Animated.spring(
                    this.state.scale,
                    { toValue: 1, friction: 3 }
                ).start();
                Animated.spring(
                    this.state.pan,
                    { toValue: 1, friction: 3 }
                ).start();

                this.incrScaleFactor = 0;
            }
        });
    }

    render() {
        // Destructure the value of pan from the state
        let { pan, scale } = this.state;

        // Calculate the x and y transform from the pan value
        let [translateX, translateY] = [pan.x, pan.y];

        let rotate = '0deg';

        // Calculate the transform property and set it as a value for our style which we add below to the Animated.View component
        let imageStyle = { transform: [{ translateX }, { translateY }, { rotate }, { scale }] };

        return (
            <View style={styles.container}>
                <Animated.View style={imageStyle} {...this._panResponder.panHandlers}>
                    <Image source={require('./img/sg.png') } />
                </Animated.View>
            </View>
        );
    }
}

class SampleScene1 extends Component {
    constructor(props) {
        super(props);
        this.componentName = "SampleScene1";
        this.componentDisplayName = "Sample Scene 1";
        this.navigator = props.navigator;
        // this.state = {
        //     pan: new Animated.ValueXY(),
        //     scale: new Animated.Value(1)
        // };
    }

    setPressButton() {
        console.log("in SampleScene1 setPressButton");
        console.log(this.props.navigator);

        var curr_routes = this.props.navigator.getCurrentRoutes();

        var idx;
        for (idx in curr_routes) {
            console.log(curr_routes[idx]);
        }

        //this.props.navigator.jumpTo(curr_routes[1]);
    }

    onPressForwardButton() {
        console.log("in " + this.componentDisplayName + " onPressForwardButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpForward();
    }

    onPressBackButton() {
        console.log("in " + this.componentDisplayName + " onPressBackButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpBack();
    }

    testPressBackButton() {
        console.log("in " + this.componentDisplayName + " testPressBackButton");
        //console.log(this.props.navigator);
    }

    render() {
        return (
            <View style={{ flexDirection: 'column', flex: 1 }}>

                <TopBar text="Dummy topbar" />

                <View style={{ flex: 1, justifyContent: 'flex-start', margin: 10 }}>
                    <Text>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </Text>

                </View>

                <NavigationBar text="asd" navigator={ this.navigator } />

            </View>
        );
    }
}

class SampleScene2 extends Component {
    constructor(props) {
        super(props);
        this.componentName = "SampleScene2";
        this.componentDisplayName = "Sample Scene 2";
        this.navigator = props.navigator;
    }

    setPressButton() {
        console.log("in SampleScene2 setPressButton");
    }

    onPressForwardButton() {
        console.log("in " + this.componentDisplayName + " onPressForwardButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpForward();
    }

    onPressBackButton() {
        console.log("in " + this.componentDisplayName + " onPressBackButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpBack();
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>Sample scene 2</Text>
                <Text>An example scene</Text>
                <Text onPress={() => this.setPressButton() }>Scene 2 Action</Text>
                <Text onPress={() => this.onPressForwardButton() }>Forward</Text>
                <Text onPress={() => this.onPressBackButton() }>Back</Text>

                <NavigationBar text="asd" navigator={ this.navigator } />
            </View>
        );
    }
}

class SampleScene3 extends Component {
    constructor(props) {
        super(props);
        this.componentName = "SampleScene3";
        this.componentDisplayName = "Sample Scene 3";
        this.navigator = props.navigator;
    }

    setPressButton() {
        console.log("in SampleScene3 setPressButton");
    }

    onPressForwardButton() {
        console.log("in " + this.componentDisplayName + " onPressForwardButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpForward();
    }

    onPressBackButton() {
        console.log("in " + this.componentDisplayName + " onPressBackButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpBack();
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>Sample scene 3</Text>
                <Text>An example scene</Text>
                <Text onPress={() => this.setPressButton() }>Scene 3 Action</Text>
                <Text onPress={() => this.onPressForwardButton() }>Forward</Text>
                <Text onPress={() => this.onPressBackButton() }>Back</Text>
                <NavigationBar text="asd" navigator={ this.navigator } />
            </View>
        );
    }
}

class SampleScene4 extends Component {
    constructor(props) {
        super(props);
        this.componentName = "SampleScene4";
        this.componentDisplayName = "Sample Scene 4";
        this.navigator = props.navigator;
    }

    setPressButton() {
        console.log("in " + this.componentDisplayName + " setPressButton");
    }

    onPressForwardButton() {
        console.log("in " + this.componentDisplayName + " onPressForwardButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpForward();
    }
    onPressBackButton() {
        console.log("in " + this.componentDisplayName + " onPressBackButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpBack();
    }

    render() {
        return (
            <ScrollView style={styles.scene}>
                <Text style={styles.messageText}>{this.props.message}</Text>
                <NavigationBar text="asd" navigator={ this.navigator } />
            </ScrollView>
            // <View style={styles.container}>
            //     <Text>Sample scene 4</Text>
            //     <Text>An example scene</Text>
            //     <Text onPress={() => this.setPressButton()}>Scene 4 Action</Text>
            //     <Text onPress={() => this.onPressForwardButton()}>Forward</Text>
            //     <Text onPress={() => this.onPressBackButton()}>Back</Text>
            // </View>
        );
    }
}


////////////////////////////////////////////////////////////////////////////////
// APPLICATION

var applicationRoutes = [

    { name: "Scene 1", index: 1 },
    { name: "Scene 2", index: 2 },
    { name: "Scene 3", index: 3 },
    { name: "Scene 4", index: 4 },
    { name: "Scene 0", index: 0 }
];

class ProjectRadarReact extends Component {
    render() {
        return (
            <Navigator
                initialRoute={applicationRoutes[0]}
                initialRouteStack={applicationRoutes}
                renderScene={(route, navigator) => {
                    console.log("route:" + route);
                    console.log("navigator:" + navigator);
                    var prop;
                    for (prop in route) {
                        console.log("route:[" + prop + "]:" + route[prop]);
                    }
                    // for (prop in navigator) {
                    //     console.log("navigator:[" + prop + "]:"+ navigator[prop]);
                    // }

                    switch (route.name) {
                        case "Scene 0":
                            return (<SampleScene0 navigator={navigator} />);
                        case "Scene 1":
                            return (<SampleScene1 navigator={navigator} />);
                        case "Scene 2":
                            return (<SampleScene2 navigator={navigator} />);
                        case "Scene 3":
                            return (<SampleScene3 navigator={navigator} />);
                        case "Scene 4":
                            return (<SampleScene4 navigator={navigator} />);
                        default:
                            return (<SampleScene1 navigator={navigator} />);
                    }
                }
                }
                />
        );
    }
}

AppRegistry.registerComponent('ProjectRadarReact', () => ProjectRadarReact);